<template>
	<view>
		<u-navbar title=" " leftIcon="bell" placeholder :bgColor="bgColor" :border="false"></u-navbar>
		<view class="user">
			<view class="avatar-wrap">
				<!-- <image src="../../static/tabbar/chou-a.png" mode="widthFix" class="avatar"></image> -->
			</view>
			<view class="user-info">
				<view class="oneline">
					<view class="username">科科</view>
					<view class="shenfen">身份: 132456</view>
				</view>
				<view class="userid">用户ID: 132456</view>
				<view class="user-days">入住天数: 132456</view>
			</view>
		</view>
		<view class="balance-wrap">
			<view class="balance-item" v-for="i in 3" :key="i">
				<view class="number">500</view>
				<view class="text">抽币</view>
			</view>
		</view>
		<view class="notice-wrap">
			系统公告
		</view>
		<view class="grid-wrap">
			<view class="grid-item" v-for="i in 10" :key="i">
				<image class="img" src="../../static/icon/icon.png" mode="widthFix"></image>
				<view class="name">知识库</view>
			</view>
		</view>
		<custom-tab-bar :currentIndex="4"></custom-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "transparent",
			};
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 28rpx;
		display: flex;
		align-items: center;

		.avatar-wrap {
			width: 84px;
			height: 84px;
			opacity: 1;
			background: #D8D8D8;
			border-radius: 50%;

			.avatar {
				width: 100%;
				height: 100%;
			}
		}

		.user-info {
			margin-left: 20rpx;

			.oneline {
				display: flex;
				align-items: center;

				.username {
					font-weight: 600;
					line-height: 33px;
					letter-spacing: 0.04em;
					font-size: 40rpx;
					color: #3d3d3d;
				}

				.shenfen {
					font-size: 10px;
					font-weight: normal;
					letter-spacing: 0.04em;
					font-variation-settings: "opsz" auto;
					font-feature-settings: "kern" on;
					color: #939393;
					margin-left: 20rpx;
				}
			}

			.userid,
			.user-days {
				font-size: 10px;
				font-weight: normal;
				letter-spacing: 0.04em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #939393;
				margin-top: 10rpx;
			}
		}
	}

	.balance-wrap {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.balance-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #3d3d3d;


			.number {
				font-size: 40rpx;
			}

			.text {
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.notice-wrap {
		width: 672rpx;
		height: 160rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: linear-gradient(-270deg, #494748 0%, #292733 100%);
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #F4B243;
		font-size: 40rpx;
	}

	.grid-wrap {
		display: flex;
		align-items: center;

		flex-wrap: wrap;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			margin-bottom: 40rpx;

			.img {
				width: 70rpx;
				height: 70rpx;
			}

			.name {
				font-size: 32rpx;
				color: #3d3d3d;

				margin-top: 25rpx;
			}

		}
	}
</style>